<template>
		<div class="card rdsp-card-view" data-page="focusEquipment">
			<div class="card-content card-content-padding">
				<div class="rdsp-card-title">关注设备</div>
				<div class="row" style="margin-top: 15px;">
					<div class="col focus-title">
						关注总数
						<p id="normalNum_focus" style="color: #59a3ff;">0</p>
					</div>
					<div class="col focus-title">
						报警设备
						<p id="alertNum_focus" style="color: #ed7175;">0</p>
					</div>
					<div class="col focus-title">
						故障设备
						<p id="faultNum_focus" style="color: #face57;">0</p>
					</div>
					<div class="col focus-title">
						屏蔽设备
						<p id="shelNum1_focus" style="color: #999; border-right: none;">0</p>
					</div>
				</div>
			</div>
			<div class="list media-list" style="padding: 30px 10px;padding-bottom: 0;">
				<ul id="serverContentn">
				</ul>
			</div>
			<!--更多按钮-->
			<a href="/mineFocunsOn/0/0/" class="morelist" data-view=".view-main">
				<i class="iconfont app-icon-down icon-xiala"></i>
			</a>
		</div>
</template>

<style scoped>
	.img_bqq {
	    /*width: 45px;*/
        padding-top: 1.5px;
        height: 17px;
	}
	.maintitle {
	    width: 85%;
	    padding-left: 5px;
	    font-size: 14px;
	    padding-top: 1px;
	}
	.sublinenumber {
	    font-size: 12px;
	    padding-left: 0px;
	    padding-top: 10px;
	}
	.imgicon {
	    width: 50px;
	    height: 50px;
	    border-radius: 5px;
	    background: #eaeaea;
	}
	.focus-title {
	    height: 100%;
	    text-align: center;
	    position: relative;
	}
	.focus-title p{
		position: absolute;
		width: 100%;
		text-align: center;
		padding: 0;
		margin: 0;
		font-size: 29px;
	}
	.focus-title p{
		border-right: 1px solid #e1e1e1;
	}
	.morelist {
		width: 100%;
		height: 30px;
		line-height: 35px;
		display: inline-block;
		text-align: center;
	}
	.md .list .line {
		font-size: 28px;
		padding-right: 10px;
		line-height: 0px;
	}
	#serverContentn:before, #serverContentn:after {
		height: 0px !important;
		width: 0px !important;
	}
	.md .list ul:before {
		height: 0px !important;
		width: 0px !important;
	}
	.md .list ul:after {
		height: 0px !important;
		width: 0px !important;
	}
	.card-header:after{
	  height: 0px !important;
	}
</style>
<script>
    return {
        methods:{
    	   getEquipment:function(){
    	   	   jQuery("#serverContentn").empty();
    		   var self = this; 
    		   Dao.getEquipment({
    		       orgIds:single_Orgid,
                   userName:userInfor.accountName,
                   deviceId:appKeyObj.deviceId,
                   userAccount:userInfor.accountName,
                   type:"1"
			   },function(data){
                   if (data && data.length > 0) {
                        var Listlength=0;
                        if(data.length>3){
                           Listlength=2;
					    }else{
                           Listlength=data.length;
					    }
                        for (var i = 0; i <Listlength ; i++) {
                           var bean = data[i];
                           var logoimage = '';
                           if (bean.icon && bean.icon != "" && JSON.parse(bean.icon).detailIcon && JSON.parse(bean.icon).detailIcon != "") {
                               logoimage = JSON.parse(bean.icon).detailIcon;
                           } else {
                               logoimage = staticPath + "img/UnitRealtimeState/unit_all.png";
                           }
                           var statueimage = '';
                           if (bean.fireTType == 10) {
                               statueimage = staticPath + "img/dectorState/alarm_bq.png";
                           } else if (bean.fireTType == 20) {
                               statueimage = staticPath + "img/dectorState/fault_bq.png";
                           } else if (bean.fireTType == 30) {
                               statueimage = staticPath + "img/dectorState/shield_bq.png";
                           } else {
                               statueimage = staticPath + "img/dectorState/normal_bq.png";
                           }
                           jQuery("#serverContentn").append(`
                           	<li id=eq_`+ bean.id +`>
					            <a href="/eqmentMsg/` + bean.concemId + `/" class="link item-content" data-view=".view-main">
					                <div class="item-media">
					                    <img src=` + logoimage + ` class="imgicon">
					                </div>
					                <div class="item-inner">
				                        <div class="item-title-row linenumber">
				                            <img src=` + statueimage + ` class="img_bqq">
				                            <div class="item-title maintitle">` + common.transNullundefined(bean.fcfName.toString()) + `</div>
				                        </div>
				                        <div class="sublinenumber  item-subtitle">
				                            <div style="font-size: 10px;">` + common.transNullundefined(bean.location.toString()) + `</div>
				                        </div>
					                </div>
					            </a>
					        </li>`);
                       }

                       var Allnumber = data.length;
                       var Firenumber = 0;
                       var fulnumber = 0;
                       var shenumber = 0;
                       for (var i = 0; i <data.length ; i++){
                           if (data[i].fireTType == 10) {
                               Firenumber+=1;
                           } else if (data[i].fireTType == 20) {
                               fulnumber+=1;
                           } else if (data[i].fireTType == 30) {
                               shenumber+=1;
                           }
					   }
                       jQuery("#normalNum_focus").empty();
                       jQuery("#alertNum_focus").empty();
                       jQuery("#faultNum_focus").empty();
                       jQuery("#shelNum1_focus").empty();

                       jQuery("#normalNum_focus").append(
                           common.transNullundefined(Allnumber.toString())
                       )
                       jQuery("#alertNum_focus").append(
                           common.transNullundefined(Firenumber.toString())
                       )
                       jQuery("#faultNum_focus").append(
                           common.transNullundefined(fulnumber.toString())
                       )
                       jQuery("#shelNum1_focus").append(
                           common.transNullundefined(shenumber.toString())
                       )
                   } else {
                       $("#serverContentn").append(`<div class="no-data" style="margin: 10px 0;">暂无关注设备</div>`);
                   }
    		   });
    	   }
        },
        on: {
        	pageAfterIn: function(e, page) {
        	 	var self = this;
             	var app = self.$app;
             	var $ = self.$;
             	self.getEquipment();//获取服务器信息
          	}
    	}
    }
</script>